DEBUG MODE DETECTED

Contrast Checker Tool

Check color contrast ratios for accessibility compliance. Ensure your designs meet WCAG standards with our free, instant contrast checker.

How to Use the Contrast Checker

1

Choose Your Colors

Select foreground and background colors using color pickers or by entering HEX, RGB, or HSL values. The tool supports all common color formats.

2

Check Contrast Ratio

Click "Check Contrast" to calculate the contrast ratio between your selected colors. The tool will instantly display the ratio and WCAG compliance results.

3

Review Results

See if your color combination passes WCAG AA and AAA standards for normal text, large text, and UI components. View previews in different vision modes.

4

Copy & Share

Copy the contrast ratio results or reset the tool to start over. All processing happens locally in your browser - your colors never leave your device.

Contrast Checker

Foreground Color

Background Color

21:1
Normal Text (AA)
PASS
≥ 4.5:1
Normal Text (AAA)
PASS
≥ 7:1
Large Text (AA)
PASS
≥ 3:1
Large Text (AAA)
PASS
≥ 4.5:1

Text Preview

Normal Text Example
Normal Text (16px)
Large Text Example
Large Text (24px)
Button Example
UI Component

Color Vision Simulation

Aa
Normal Vision
Aa
Protanopia
Aa
Deuteranopia
Aa
Tritanopia
English
Español
Français
Deutsch
Italiano
Português
日本語
Pусский
한국어
中文 (简体)
中文 (繁體)
العربية
فارسی
Български
Català
Nederlands
Ελληνικά
हिन्दी
తెలుగు
ಕನ್ನಡ
தமிழ்
മലയാളം
Bahasa Indonesia
Bahasa Melayu
Polski
ภาษาไทย
Türkçe
Українська
Tiếng Việt
Íslenska
Norsk
Svenska
Suomi
Čeština